/*
 * @Author: lg
 * @Date: 2023-11-08 09:06:01
 * @LastEditors: zhouxuan
 * @LastEditTime: 2024-08-20 15:21:56
 * @Description:
 * @FilePath: \vite-react\src\views\home\index.jsx
 */

import { useEffect, useState } from "react";
import "./index.scss";
import { Carousel } from "antd";
import ChinaMap from "@/components/china-map/index";
import { DivFlexColumn, DivFlexCenter } from "@/styles/div-css/index";
import { useNavigate } from "react-router-dom";
import { getNewsCenterApi } from "@/api/news-center/index";
import TitlePublic from "@/components/title-public/index";
const imgStyle = {
  height: "560px",
  width: "100%",
};

const carouselList = [
  {
    ulr: "https://gggj-fe.oss-cn-hangzhou.aliyuncs.com/steel-mall/banner1.png",
  },
  {
    ulr: "https://gggj-fe.oss-cn-hangzhou.aliyuncs.com/steel-mall/banner4.png",
  },
  {
    ulr: "https://gggj-fe.oss-cn-hangzhou.aliyuncs.com/steel-mall/banner2.png",
  },
  // {
  //   ulr: "https://gggj-fe.oss-cn-hangzhou.aliyuncs.com/steel-mall/banner3.png",
  // },
];

const IndustryNews = () => {
  const navigate = useNavigate();
  const [industryList, setIndustryList] = useState([]);
  const getNewsCenter = async () => {
    const res = await getNewsCenterApi({
      page: 1,
      pageSize: 3,
    });

    setIndustryList(res.data.list);
  };

  const handleToNewsCenter = () => {
    navigate("/news-center/industry-news");
  };

  useEffect(() => {
    getNewsCenter();
  }, []);
  return (
    <DivFlexColumn className="industry-news">
      {/* <h3>行业头条</h3>
      <p>获悉最新前沿资讯、洞察数字转型之路</p> */}
      <TitlePublic englishTitle="Industry Headlines" chineseTitle="行业头条" />
      <ul className="industry-news-ul">
        {industryList.map((item) => {
          return (
            <li key={item.title} className="industry-news-item">
              <div className="title">{item.title}</div>
              <div className="content">{item.content}</div>
              <div className="time">{item.time}</div>
            </li>
          );
        })}
      </ul>
      <DivFlexCenter className="see-more">
        <span onClick={handleToNewsCenter}>查看更多</span>
      </DivFlexCenter>
    </DivFlexColumn>
  );
};

function Home() {
  return (
    <div className="home">
      <Carousel arrows infinite={false}>
        {carouselList.map((item) => {
          return (
            <div key={item.ulr}>
              <img src={item.ulr} alt="" style={imgStyle} />
            </div>
          );
        })}
      </Carousel>
      <ChinaMap height="80vh" width="100%" />
      <IndustryNews></IndustryNews>
    </div>
  );
}

export default Home;
